<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=2.0" />
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    	<script src="js/jquery.min.js"></script>
    	<script src="js/jquery.mobile-1.4.5.min.js"></script>
        <title></title>
        <script>
    		$("#mypanel").trigger("updatelayout");
   		</script>
   		<script>
   			$(document).ready(function() {
   				$("div").bind("swiperight",function(event) {
   					$("#mypanel").panel("open");
   				});
   			});
   		</script>
        <style type="text/css">
            .swipe {
                overflow: hidden;
                visibility: hidden;
                position: relative;
                width: 300px;
                margin: 0 auto;
            }
            
            .swipe-wrap {
                overflow: hidden;
                position: relative;
            }
            
            .swipe-wrap > div {
                float: left;
                width: 100%;
                height: 230px;
                position: relative;
                background-size: auto 230px;
                background-position: center top;
                background-repeat: no-repeat;
            }
            
            .swipe-wrap > div:nth-child(1) {
                background-image: url(img/1.jpg);
            }
            
            .swipe-wrap > div:nth-child(2) {
                background-image: url(img/2.jpg);
            }
            
            .swipe-wrap > div:nth-child(3) {
                background-image: url(img/3.jpg);
            }
            
            .swipe-wrap > div:nth-child(4) {
                background-image: url(img/4.jpg);
            }
        </style>
        <script>
	   		function li_1(){
	   			window.location.href="http://localhost:8080/findAll";
	   		};
	   		function li_2(){
	   			window.location.href="http://localhost:8080/index01";
	   		};
	   		function li_3(){
	   			window.location.href="http://localhost:8080/index03";
	   		};
	   		function li_4(){
	   			window.location.href="http://localhost:8080/index02";
	   		};
   		</script>
   		<script>
   			var btn_1_v=0;
		    function btn01()
		    {
			   	var count_btn_1=0;  //获取audio控件
		   		var btn_1=document.getElementById("btn_1");   //获取按钮控件
   				if(btn_1_v==0)          //如果当前状态为暂停
   				{
    				count_btn_1=count_btn_1+1;         //播放音乐
    				btn_1_v=1;          //更新播放状态
    				btn_1.innerHTML="取消点赞";      //刷新页面
   				}else
   				{
    				count_btn_1=count_btn_1-1;        //暂停
   		 			btn_1_v=0;          //更新播放状态
    				btn_1.innerHTML="点赞";      //刷新页面
   				};
   
   				$.ajax({
   					type:"get",
    				url:"/countdz",
    				async:true,
    				data:{"count_btn_1":count_btn_1},
    				success:function(data) {
    				}
   				});
   
  			};
    	</script>
    	<script>
			function send() {
				window.location.href="/findAll";
				var pltext=$("#where").val();
				if(pltext.trim()==""){
					alert("输入不能为空");
				}else{
					alert(pltext);
					$.ajax({
						type:"get",
						url:"/findAll",
						async:true,
						data:{"pltext":pltext},
						// success:function(data,status) {
						// 	alert("提交完成");
						// 	window.location.href="/findAll";
						// }
						window.location.href="/findAll";

					});
				};


			}
    	</script>
    	<script>
    		$(document).ready(function(){
      			go();
     		});
     
     		function go(){
      			$.ajax({
      				type:"GET",
       				url:"http://192.168.43.203:8080/myfriend/selectservlet",
       				async:false,
       				dataType:"json",
       				success:function(data){
       					$(data).each(
       						function(i, values) {
       							$("#listview").append(
       								"<li><h4>匿名用户：</h4><p>"+values.pltext+"</p></li>"
                 
                         		);
  
                     		}
                		);
    
       				},
      			});
    		}
    	</script>
    </head>

    <body>
    	<div data-role="panel" id="mypanel" data-swipe-close="false">
			<h4>作者：梁海琦</h4>
			<h4>作者介绍</h4>
			<p>就读于东莞理工学院城市学院</p>
			<p>性格开朗、稳重、有活力，待人热情、真诚；工作认真负责，积极主动，
			能吃苦耐劳，用于承受压力，勇于创新；有很强的组织能力和团队协作精神，
			具有较强的适应能力；纪律性强，工作积极配合；意志坚强，具有较强的无私奉献精神</p>
		</div>
		<div data-role="header" data-position="fixed" data-theme="b">	
			<h1>我的伙伴</h1>
			<a href="#mypanel" data-role="button" data-iconpos="right" data-icon="grid" class="ui-btn-right">关于</a>	
		</div>
		
		
		<div data-role = "content" id="aa">
			<div>
				<img src="img/4.jpg" style="width: 100%">
			</div>
<!--	        <div id="slider" class="swipe">-->
<!--	            <div class="swipe-wrap">-->
<!--	                <div></div>-->
<!--	                <div></div>-->
<!--	                <div></div>-->
<!--	                <div></div>-->
<!--	            </div>-->
<!--	        </div>-->
<!--	        <div style='text-align:center;padding-top:20px;' class="ui-grid-a">-->
<!--				<div class="ui-block-a">-->
<!--					<button onclick='slider.prev()'>上一页</button>-->
<!--				</div>-->
<!--	            <div class="ui-block-b">-->
<!--					<button onclick='slider.next()'>下一页</button>-->
<!--				</div>-->
<!--	        </div>-->
	        <div style="text-align: center;">
	        	<h4>Call:18219505764&nbsp;&nbsp;&nbsp;&nbsp;QQ:1798990963</h3>
	        </div>
	        <div>
	        	<button onclick="btn01()" id="btn_1" >点赞</button>
	        </div>
	        <hr />
			<form action="#" th:action="@{/add}" th:object="${plmodel}" method="get">
<!--			<form>-->
				<div>
					<label>匿名评论：</label>
					<textarea name="pltext" th:placeholder="输入评论" id="where"></textarea>
					<input type="submit" value="提交" onclick="send()">
<!--					<button id="send" onclick="send()">提交</button>-->
				</div>
			</form>
	        <hr />
	        <div>
	        	<label>评论区：</label>
				<br>
				<div class="ui-body-a" id="div001">
					<ul data-role="listview" id="listview" th:each="plmodel:${list}">
						<li>
							<h3>匿名用户</h3>
							<p th:text="${plmodel.getPltext()}"></p>
						</li>
					</ul>
				</div>
	        </div>
        </div>
        
        
        
        <div data-role="footer" data-position="fixed" data-theme="b">
			<div data-role="navbar" data="c">
				<ul>
					<li><a th:href="@{/findAll}" onclick="li_1()" data-icon="home">成长轨迹</a></li>
					<li><a th:href="@{/index01}" onclick="li_2()" data-icon="plus">爱好推荐</a></li>
					<li><a th:href="@{/index03}" onclick="li_3()" data-icon="star">阶段印象</a></li>
					<li><a th:href="@{/index02}" onclick="li_4()" data-icon="info">后台管理</a></li>
				</ul>
			</div>
		</div>
    </body>
    
    
    <script type="text/javascript" src="js/swipe.js"></script>
    <script type="text/javascript">
        var slider = Swipe(document.getElementById('slider'), {});
    </script>

</html>
